<template>
  <div id="vanCard" v-if="teamListRecommend != null && teamListRecommend.length > 0">
    <van-card v-for="team in teamListRecommend"
              :desc="team.description"
              :title="team.name"
              :thumb="team.imageUrl"
    >
      <template #tags style="margin-bottom: 3px;margin-top: 10px">
        <van-image v-for="user in team.userList" style="margin-right: 4px;margin-top: 3px"
                   round
                   width="25px"
                   height="25px"
                   :src="user.avatarUrl"
                   fit="cover"
        />
      </template>
      <template #bottom style="margin-bottom: 3px">
        <div>
          队伍需{{team.maxNum}} | 现人数{{team.currentTeamNum}} {{team.maxNum == team.currentTeamNum ? '已满' : ''}}
          <van-tag style="margin-left: 3px" plain type="primary">{{teamStatus[team.status]}}</van-tag>
        </div>
        <div>
          过期时间：{{team.expireTime}}
        </div>
      </template>

      <template #footer>
        <van-button size="mini" type="success"
                    v-if="!team.addTeam && team.maxNum != team.currentTeamNum" plain @click="join(team?.status,team?.id)">
          加入队伍
        </van-button>

        <van-button size="mini" color="black" plain @click="checkTeamInfo(team)">查看队伍</van-button>
      </template>
    </van-card>
  </div>



  <van-empty image="search" description="队伍暂无" v-if="!teamListRecommend || teamListRecommend.length < 1" />
  <van-loading  vertical v-else-if="isShowLoading">
    <template #icon>
      <van-icon name="star-o" size="30" />
    </template>
    加载中...
  </van-loading>


  <!--  加入队伍的Dialog弹出框  -->
  <van-dialog v-model:show="showPasswordJoinDialog" title="输入队伍密码" show-cancel-button
              @confirm="confirmJoinTeam"
              @cancel="cancelJoinTeam">
      <van-field
          v-model="passwordInputDigit"
          label="密码"
          placeholder="请输入密码"
          input-align="right"
          style="height: 70px;align-items: center"
      />
  </van-dialog>

</template>

<script setup lang="ts">
import {onMounted, ref, watch} from "vue";
import {useRouter} from "vue-router";
import {teamStatus} from "../constant/TeamStatus.ts";
import {joinTeam} from "../api/teamApi.ts";
import {showToast} from "vant";
import {userStore} from "../stores/user/user.ts";

//组件传递
const props = defineProps(['teamListRecommended']);
const teamListRecommend = ref(props.teamListRecommended);
const userStoreAPI = userStore();
const isShowLoading = ref(true);

//监听函数，监听props属性父组件传递给子组件的数据变化，因为props不能被修改！，但是teamListRecommend又监听不到！
watch(
    () => props.teamListRecommended,
    (newValue) => {
      teamListRecommend.value = newValue;//监听变化的新值
      if (newValue!== null && newValue.length > 0){
        isShowLoading.value = false;
      }
      console.log("监听变化：",teamListRecommend.value);
    },
    { immediate: true }
);



const router = useRouter();
//密码弹出框显示的布尔值
const showPasswordJoinDialog = ref(false);
//弹出框输入的密码
const passwordInputDigit = ref('');//输入的密码

const currentUser = ref();

//加入队伍的请求参数
const addTeamDataParams = {
  id:0,
  password:''
};

const teamParams = ref({...addTeamDataParams});


//加入队伍方法(显示弹窗)
const join = (status:any,teamId:any)=>{
  //弹窗提示是否需要密码
  if (2 === status){//(加密)
    //显示弹出框
    showPasswordJoinDialog.value = true;
    teamParams.value.id = teamId;
  }else {
    //直接发送请求(公开直接加入，无密码)
    teamParams.value.id = teamId;
    joinRequestMethod(teamParams.value);
  }
}

//点击密码确认的按钮方法
const confirmJoinTeam = ()=>{
  //直接发送请求（加入队伍的请求）
  teamParams.value.password = passwordInputDigit.value;
  joinRequestMethod(teamParams.value);
  passwordInputDigit.value = '';
}


//点击密码取消的按钮方法
const cancelJoinTeam = ()=>{
  showPasswordJoinDialog.value = false;
  passwordInputDigit.value = '';
}


//真正去请求的！
const joinRequestMethod = async (data : any) =>{
  const res = await joinTeam(data);
  if (200 === res?.code){
    teamListRecommend.value = teamListRecommend.value.filter(team => {
      if (data?.id === team.id) {
        showToast("加入" + team?.name + "队伍 成功");
        return false;
      }
      // 返回 true 表示保留该元素在原数组中
      return true;
    });
    passwordInputDigit.value = '';
  }
}

//查看队伍信息
const checkTeamInfo = (team: any)=>{
  const userIdList = team.userList.map(user => user.id);
  router.push({
      path: '/team/infoByOne',
      query : {
        teamId: team.id,
        userIdList:userIdList
      }
  });
}

onMounted(()=>{
  currentUser.value = userStoreAPI.getCurrentUser();//获取当前用户信息 从pina中拿
});




</script>

<style scoped>
#vanCard :deep(.van-card__thumb){
    height: 75px;
    width: 75px;
}
.vanCellPassword :deep(.van-cell__title){
  width: var(--van-field-label-width) - 20px;
}

</style>